import { MessageBox } from "element-ui";

/**
 * 实现思路：
 * 
 * 请求响应发起时，启动定时器，把请求的url存入数组中，取消函数存入实例
 * 请求响应结束时，把请求的url从数组中移除
 * 在最小定时器时间后判断数组长度==0关闭定时器
 * 在超时定时器时间后弹出取消模态框，响应操作按钮
 */
/**
 * 请求封装类
 */
class FetchUtils {
	constructor() {
		this.time = 0;
		this.timer = null;
		this.minTime = 1;
		this.outTime = 40;
		this.Dep = new Dep();
		this.cancel = null;
		this.whiteList = ['localLogin','logout','currentAuthId']
	}
	/**
	 * 监听请求函数
	 * url-请求地址
	 * cancel-取消函数
	 */
	request(url, cancel) {
		this.isInWhiteList(url, (result = false) => {
			if (result) return
			this.Dep.add(url)
			this.cancel = cancel
			if (!this.timer) {
				this.timer = setInterval(() => {
					if (this.time > this.minTime && this.Dep.getSubs().length === 0) {
						clearInterval(this.timer)
						this.restore()
						// 如果模态框存在 自动关闭
						let ele = document.querySelector('.Box .el-message-box__header .el-message-box__headerbtn')
						ele && ele.click()
					}
					if (this.time == this.outTime) {
						MessageBox.confirm('是否中止当前页面数据请求?', '提示', {
							confirmButtonText: '中止',
							showCancelButton: false,
							customClass: 'Box',
							type: 'warning'
						}).then(() => {
							this.cancel()
							clearInterval(this.timer)
							this.restore()
						}).catch((err) => {
							console.log(err);
						});
					}
					this.time++;
				}, 1000)
			}
		})
	}
	/**
	 * 
	 * @param {*} url 请求成功后的回调地址 
	 */
	response(url) {
		this.isInWhiteList(url, (result) => {
			if (result) return
			this.Dep.remove(url)
		})
	}
	/**
	 * 重置时间函数
	 */
	restore() {
		this.time && (this.time = 0)
		this.timer && (this.timer = null)
	}
	/**
	 * 请求取消函数
	 */
	cancel() {
		this.cancel && this.cancel()
	}
	/**
	 * 
	 * @param {*} url
	 * 判断当前地址是否存在白名单内 
	 */
	isInWhiteList(url, callBack) {
		let result,
			list = this.whiteList;
		for (let i = 0; i < list.length; i++) {
			result = url ? url.includes(list[i]) : false
			if (result) {
				callBack(result);
				break;
			}
		}
		callBack(result)
	}

}
/**
 * 请求类
 * add-请求添加
 * remove-请求移除
 * getSubs-获取请求数组长度
 */
class Dep {
	constructor() {
		this.subs = [];

	}
	/**
	 * 
	 * @param {*} sub 添加集合
	 * 添加请求集合
	 */
	add(sub) {
		let index = this.subs.findIndex(item => item == sub)
		if (index == -1) {
			this.subs.push(sub)
		}
	}
	/**
	 * 
	 * @param {*} sub 请求集合
	 * 移除请求集合
	 */
	remove(sub) {
		const index = this.subs.findIndex(item => item = sub)
		this.subs.splice(index, 1)
	}
	/**
	 * 
	 * @returns 
	 * 获取请求shuzu
	 */
	getSubs() {
		return this.subs
	}
}
export default FetchUtils